<div class="layui-body-header">
  <ul class="kit-breadcrumb"> 
    <li class="kit-item">
      <a href="javascript:;">
        <i class="layui-icon">&#xe658;</i>
        <span>页面管理</span>
      </a>
    </li>
  </ul>
</div>
<!-- 模板 -->
<div class="layui-fluid">
  <div class="layui-row">
    <div class="layui-col-xs12">
      <div class="layui-card">
        <div class="layui-card-header">
          <!-- <span>所有会员列表</span> -->
          <a href="#/layui/pageNew" class="layui-btn layui-btn-sm">新增</a>
          <button class="layui-btn layui-btn-sm layui-btn-danger " onclick="deleat()">
            <span>删除</span>
          </button>
          <!--<a href="javascript:;" class="layui-btn layui-btn-sm layui-btn-primary" id="search_hash">
            <i class="layui-icon">&#xe615;</i>
          </a>-->
        </div>
        <div class="layui-card-body">
          <table id="demo_hash" lay-filter="test"></table>
          <script type="text/html" id="barDemo_hash3">
              <a class="layui-btn layui-btn-xs" lay-event="detail">编辑</a>
          </script>
        </div>
      </div>
    </div>
  </div>
</div>
<script type="text/html" id="search_tpl_hash">
  <form class="layui-form" action="">
    <div class="layui-form-item">
      <label class="layui-form-label">页面名称</label>
      <div class="layui-input-block">
        <input type="text" name="Name" autocomplete="off" class="layui-input">
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">一级目录</label>
      <div class="layui-input-block">
        <select name="OneID" lay-filter="oneID">
          <option value="-2">全部</option>
          <option value="0">基础数据</option>
          <option value="1">用户管理</option>
          <option value="2">肤质管理</option>
          <option value="3">商品管理</option>
          <option value="4">订单管理</option>
          <option value="5">卡券管理</option>
          <option value="6">照片管理</option>
          <option value="7">统计列表</option>
          <option value="8">渠道商管理</option>
          <option value="9">权限管理</option>
        </select>
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">二级目录</label>
      <div class="layui-input-block">
        <select name="TwoID" lay-filter="twoID" class="two_select_area">
          <option value="-2">全部</option>

        </select>
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">页面类型</label>
      <div class="layui-input-block">
        <select name="PageType">
          <option value="-2">全部</option>
          <option value="0">左侧菜单栏</option>
          <option value="1">普通操作页面</option>
        </select>
      </div>
    </div>
    <div class="layui-form-item">
      <div class="layui-input-block">
        <button class="layui-btn" lay-submit lay-filter="formDemo_hash"><i class="layui-icon">&#xe615;</i> 搜索</button>
        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
      </div>
    </div>
  </form>
</script>
<!-- 脚本 -->
<script>
  var selectId = []
  layui.use(['table', 'sidebar', 'form'], function () {
    var layer = layui.layer,
      table = layui.table,
      sidebar = layui.sidebar,
      form = layui.form;
  

    //第一个实例
    table.render({
      method: 'get',
      // size: 'sm',
      limit: 10000,
      elem: '#demo_hash',
      id:'demo_hash',
      height: 'full-235',
      url: DBHelper.host+'api/Admin_Xn_Page', //数据接口
//    page: true, //开启分页
      parseData: function(res){
        return {
          "code": 0 , //解析接口状态
          "data": res, //解析数据列表 
        }
      },
      cols: [
        [ //表头
         {
            width: 80,
            type:'checkbox'
          }, 
          {
            field: 'Guid',
            title: 'Guid',
            align: 'center',
            hide:true
          },{
            field: 'PageType',
            title: '页面类型',
            align: 'center',
            templet:function (d) {
              if(d.PageType==0){
                return '左侧菜单栏'
              }else {
                return '普通操作页面'
              }
            }
          },
          
          {
            field: 'Name',
            title: '页面名称',
            align: 'center',
          },
          
          {
            field: 'PagePath',
            title: '页面源文件',
            align: 'center',
          },
          {
            field: 'Description',
            title: '描述',
            align: 'center',
          },
          {
            title:'编辑',
            align: 'center',
            toolbar: '#barDemo_hash3',
            event:'edit'
          },
        ]
      ]


    });

    $('#search_hash').on('click', function () {
      var that = this;
      // console.log($('#search_tpl_hash').html());
      sidebar.render({
        elem: that,
        content: $('#search_tpl_hash').html(),
        title: '搜索',
        shade: true,
        // shadeClose:false,
        // direction: 'left'
        // dynamicRender: false,
        // url: 'views/member/all/search.html',
        width: '500px', //可以设置百分比和px
        done: function () {
          

          form.on('select(oneID)',function (data) {
            console.log(1)
            if (data.value == 0){
        $('.two_select_area').html('<option value=""></option>\
                  <option value="0">平台设置</option>\
                  <option value="1">授权设置</option>\
                  <option value="2">分享海报</option>\
                  <option value="3">会员等级</option>')
      form.render();
    }else if(data.value == 1){
      $('.two_select_area').html('<option value=""></option>\
                      <option value="4">会员列表</option>\
                      <option value="5">会议列表</option>\
                      <option value="6">评论管理</option>\
                      <option value="7">职位列表</option>')
      form.render();
    }else if(data.value == 2){
      $('.two_select_area').html('<option value=""></option>\
                      <option value="8">分会管理</option>\
                      <option value="9">商圈管理</option>')
      form.render();
    }else if(data.value == 3){
      $('.two_select_area').html('<option value=""></option>\
                      <option value="10">产品列表</option>')
      form.render();
    }else if(data.value == 4){
      $('.two_select_area').html('<option value=""></option>\
                      <option value="11">官网管理</option>')
      form.render();
    }else if(data.value == 5){
      $('.two_select_area').html('<option value=""></option>\
                      <option value="12">权限管理</option>\
                      <option value="13">管理员设置</option>\
                      <option value="14">页面设置</option>\
                      <option value="15">数据库备份</option>\
                      <option value="16">操作日志</option>')
      form.render();
    }
          })

          form.render();

          //监听提交
          form.on('submit(formDemo_hash)', function (data) {
            console.log(data.field)
            table.reload('demo_hash', {
              where: {
                "Name": data.field.Name,
                "OneID": data.field.OneID,
                "TwoID": data.field.TwoID,
                "PageType": data.field.PageType,
              }
            });
            return false;
          });
        }
      });
    });

    table.on('tool(test)', function(obj){ //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
      var data = obj.data; //获得当前行数据
      console.log(data)
      var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
      var tr = obj.tr; //获得当前行 tr 的DOM对象
     
      // if(layEvent === 'detail'){ //查看
      //   //do somehing
      // } else if(layEvent === 'del'){ //删除
      //   layer.confirm('真的删除行么', function(index){
      //     obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
      //     layer.close(index);
      //     //向服务端发送删除指令
      //   });
      // } else if(layEvent === 'edit'){ //编辑
      //   //do something
        
      //   //同步更新缓存对应的值
      //   obj.update({
      //     username: '123'
      //     ,title: 'xxx'
      //   });
      // }
     if (layEvent === 'edit') {
        console.log('编辑')
        location.href="#/layui/pageNew?Guid="+data.Guid
      }
    })


    table.on('checkbox(test)',function (obj) {
      var checkStatus = table.checkStatus('demo_hash'); //idTest 即为基础参数 id 对应的值
      selectId = []
      // console.log(checkStatus.data)
      // console.log(checkStatus.data) //获取选中行的数据
      for(var i = 0 ; i < checkStatus.data.length ; i++){
        selectId.push(checkStatus.data[i].Guid)
      }
    })
  });

function deleat() {
  if (selectId.length == 0) {
      alert('请先选择需要删除项')
      return false
    }
      layer.open({
        content: '确认删除？',
        yes: function(index, layero){
            for(var i = 0 ; i < selectId.length ; i++){
              delAjax(selectId[i])
            }
        }
      })
    }

function delAjax(id) {
  DBHelper.Delete('Admin_Xn_Page/'+id,function (res) {
    location.reload()
  },function (res) {
    alert(res)
  })
}
</script>
<!-- 样式 -->
<style scoped>
</style>